@import '../assets/styles/react-select.min.css';

html,
body,
#main {
  width: 100%;
  min-width: 1024px;
  font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", sans-serif;
  font-size: 12px;
}

html,
body,
#main,
#squareContainer,
#square {
  height: 100%;
}

// #square {
//   perspective: 100px;
// }

::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
  /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  */
  -webkit-border-radius: 0px;
  border-radius: 0px;
  background: rgba($color: #F3CA82, $alpha: 0.2);
}

/* Handle */
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: rgba($color: #F3CA82, $alpha: 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: #F3CA82;
}
::-webkit-scrollbar-thumb:hover {
  background: #F3CA82;
}

body {
  background: #232323;
  color: #ddd;
}

a,
select {
  color: #ddd;
}

tt,
pre,
code,
.tt {
  // font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-family: Arial,Microsoft YaHei,sans-serif!important;
}

.red-text {
  color: #F04D64;
}
.green-text {
  color: #3DE777;
}
.light-text {
  color: rgba(#fff, 0.4);
}

.simple-btn {
  cursor: pointer;
  transition: all ease 0.2s;

  &:hover,
  &.active {
    background: rgba($color: #fff, $alpha: 0.1);
  }
}

#square {
  display: flex;
  flex-direction: column;

  .sq-b {
    display: flex;
  }

  .sq-b-l {
    margin-right: 2px;
  }

  .sq-b-r {
    display: flex;
    flex-direction: column;
  }

  .sq-b-r-t {
    display: flex;
  }

  .sq-b-r-b {
    display: flex;
  }

  .the-tabs {
    margin-right: 3px;
  }
}

.flex-autofixed {
  flex-grow: 1;
  flex-shrink: 1;
}
.flex-fixed {
  flex-grow: 0;
  flex-shrink: 0;
}

// component

.cb-select.Select {
  height: 30px;

  &.error {
    .Select-control {
      background: #4E3342 !important;
      border-color: #F74D64;
    }
  }

  .Select-control {
    background: #292A2E !important;
    border-color: #292A2E;
    height: 30px;
  }
  .Select-arrow {
    border-color: rgba(#fff, 0.25) transparent transparent;
  }
  .Select-placeholder {
    color: rgba(#fff, 0.25);
    line-height: 28px;
  }
  .Select-input {
    height: 28px;
  }
  .Select-value .Select-value-label {
    color: #fff !important;
    line-height: 28px;
  }
  .Select-control .Select-value {
    line-height: 28px;
  }
  .Select-control .Select-input:focus {
    background: transparent;
  }
  .Select-menu-outer {
    background: #292A2E;
    border-color: #292A2E;
  }
  .Select-option {
    background: #292A2E;
    color: #fff;

    &.is-selected,
    &.is-focused {
      background-color: rgba(#fff, 0.25);
      // color: $select-option-selected-color;
    }
  }
}

.rc-slider {
  .rc-slider-rail {
    background: #000000;
  }

  .rc-slider-track {
    background-color: #F3CA82;
  }

  .rc-slider-handle {
    border-color: #F3CA82;
    background: #F3CA82;
    height: 10px;
    width: 10px;
    margin-left: -5px;
    margin-top: -3px;
  }
}

.tag {
  display: inline-block;
  border-radius: 3px;
  background: #292A2E;
  border: rgba(#F3CA82, 0.25) solid 1px;
  padding: 2px 4px;
}

.m-only {
  display: none !important;
}

@media (max-width: 875px) {
  .m-only {
    display: inherit !important;
  }

  .m-hide {
    display: none !important;
  }

  html,
  body,
  #main {
    min-width: auto;
  }

  #square {
    display: block;
  
    .sq-b {
      display: block;
    }
  
    .sq-b-l {
      margin-right: 0;
    }

    .sq-b-r-t {
      display: block;
    }
  
    .sq-b-r-b {
      display: block;
    }

    // trade部分，左右结构
    .sq-b-r {
      flex-direction: row-reverse;
    }
  }

  .m-show-trade {
    .sq-b-r {
      .sq-b-r-t,
      .sq-b-r-b {
        flex-grow: 1;
        flex-shrink: 1;
        width: 50%;
      }
    }
  }
}
